<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>inline-height测试</title>
    <style>
        .root{
            width:200px;
            height:200px;
            border:1px solid black;
        }
        .item2{
            display:inline-block;
            vertical-align:baseline;
            width:10px;
            height:100px;
            border:1px solid black;
        }
        .item{
            display:inline-block;
            vertical-align:baseline;
            width:50px;
            height:50px;
            border:1px solid black;
        }

        .text{
            /* vertical-align: top; */
        }
    </style>
</head>

<body>
    <div class="root">
        <span style="background-color: cadetblue;">
            <span class="text" style="font-size: 16px;">123x</span><span class="text" style="font-size: 30px;">123x</span><div class="item"></div><div class="item2"></div>
        </span>
    </div>
</body>

</html>